function Enlarge(select){
    this.ele = document.querySelector(select)
    this.show = this.ele.querySelector('.show')
    this.mask = this.ele.querySelector('.mask')
    this.list = this.ele.querySelector('.list')
    this.enlarge = this.ele.querySelector('.magnifier')
    this.img = this.enlarge.firstElementChild
     // show 的宽度
     this.show_width = this.show.offsetWidth
     this.show_height = this.show.offsetHeight
     //mask的宽度  window.getComputedStyle(元素).样式名  非行内样式
     this.mask_width = parseInt(window.getComputedStyle(this.mask).width)
     // mask 的高度
     this.mask_height = parseInt(window.getComputedStyle(this.mask).height)
     //背景图的宽高
     this.bg_width = parseInt (window.getComputedStyle(this.img).width)
     this.bg_height = parseInt (window.getComputedStyle(this.img).height)
     this.init()
}
//调用
Enlarge.prototype.init = function(){
    this.setScale()
    this.overOut()
     this.changeList()
    this.move()
}
//调整比列 setScale
 Enlarge.prototype.setScale = function(){
   //计算出 enlarge 盒子的尺寸
   this.enlarge_width = this.bg_width * this.mask_width / this.show_width
   this.enlarge_height = this.bg_height * this.mask_height / this.show_height
   //赋值
   this.enlarge.style.width = this.enlarge_width + 'px'
   this.enlarge.style.height = this.enlarge_height + 'px'
 }
//移入移出 overOut
Enlarge.prototype.overOut = function(){
    this.show.addEventListener('mouseover',() =>{
        this.mask.style.display = 'block'
        this.enlarge.style.display = 'block'
    })
    this.show.addEventListener('mouseout', () => {
        this.mask.style.display = 'none'
        this.enlarge.style.display = 'none'
      })
}
// //小图切换  changeList
Enlarge.prototype.changeList = function(){
    this.list.addEventListener('click',(e) =>{
        e = e ||window.event
        const target = e.target ||e.srcElement
        //判断点击img
        if(target.nodeName === 'IMG'){ 
            //切换图片
            const show_url = target.dataset.show
            const enlarge_url = target.dataset.enlarge
            // 更换地址
            this.show.firstElementChild.src = show_url
            this.enlarge.firstElementChild.src = enlarge_url
            //取消active
            
        for(let i = 0; i < this.list.children.length; i ++){
            
            this.list.children[i].classList.remove('active')
        }
        //给 p 添加 active
        target.parentElement.classList.add('active')
        }

    })
}
// //光标跟随 move
 Enlarge.prototype.move =function(){
    this.show.addEventListener('mousemove',e =>{
        e = e ||window.event
        //拿到坐标点
         let x = e.offsetX - this.mask_width / 2
         let y = e.offsetY - this.mask_height / 2
         //设边界值
         if(x <= 0) x = 0
         if(y <= 0) y =0
         if(x >= this.show_width - this.mask_width) x =this.show_width - this.mask_width
         if(y >= this.show_height - this.mask_height) y = this.show_height - this.mask_height
         // 赋值
         this.mask.style.left = x + 'px',
         this.mask.style.top = y + 'px'
         //跟随比例 公式: 背景图移动距离 = mask 移动距离 * enlarge 盒子尺寸 / mask 盒子尺寸
         const bgX = x * this.enlarge_width / this.mask_width
         const bgY = y * this.enlarge_height / this.mask_height
         //赋值
         this.img.style.left = -bgX + 'px'
         this.img.style.top = -bgY + 'px'
    })
 }
 const bb = document.querySelector('.information')
 getInfo()
async function getInfo() {
  const res = await pAjax({
    url: '/dt?code=3e6bff6304c547dba650d9941aa472c0&searchWord=(channelId%3D38350)+and+(psale%3D0)&pageNo=1&pageSize=32&siteId=2&aggs=&filterJsonUrl=https%3A%2F%2Fwww.haier.com%2Fcn%2Flaundry%2Ffilter_es.json&orderBy=saleFlag%3Adesc%2CproductSaleDate%3Adesc&filter=&defaultSearch=(channelId%3D38350)+and+(psale%3D0)&retFilterJson=yes&searchColumns=productShowLabel',
    dataType: 'json'
  })
  const goods_id = window.sessionStorage.getItem('id') - 0
console.log(goods_id)
// 判断一下, 如果没有 goods_id , 直接跳转回列表页
if (!goods_id) {
  window.location.href = './list.html'
  throw new Error('没有您查看的商品详情')
}
    let goods = res.page.data.find(function(item){return item.metaDataId === goods_id})
    console.log(goods)
    bb.innerHTML = `
    <h1>${goods.pname}</h1>
         <h3 style="padding:10px 50px;">${goods.modelno}</h3>
         <p class="p2"><span class="ss">${goods.tags}</span></p>
         <p class="p1">参考价 ￥${goods.price} </p>
         <h5>具体成交价格根据商品参加活动或会员使用优惠券、积分等发生变化，最终以各渠道订单结算页价格为准</h5>  
         <button>加入购物车</button>
    ` 
}